<template>
  <div class="print-pdf-con">
    <div class="left fl">
      <div class="title"> 打印销售出库单</div>
      <div class="clearfix lh40">
        <div class="text-title fl"> 选择打印模板： </div>
        <div class="fl">
          <a-select placeholder="请选择打印模板" :style="{ width: '180px' }">
            <a-option label="模板1" value="模板1"></a-option>
          </a-select>
        </div>
      </div>
      <div class="clearfix lh40 mt10">
        <div class="text-title fl"> 打印分数： </div>
        <div class="fl">
          <a-input-number :style="{ width: '180px' }" placeholder="请输入打印分数" hide-button />
        </div>
      </div>
      <div class="clearfix mt10">
        <div class="text-title fl"> 图片尺寸： </div>
        <div class="fl" style="vertical-align: bottom">
          <div :style="{ borderColor: imgWidth == 80 ? '#79a6ff' : '' }" class="item-80 fl" @click="imgWidth = 80">80</div>
          <div :style="{ borderColor: imgWidth == 60 ? '#79a6ff' : '' }" class="item-60 fl ml10" @click="imgWidth = 60">60</div>
          <div :style="{ borderColor: imgWidth == 44 ? '#79a6ff' : '' }" class="item-44 fl ml10" @click="imgWidth = 44">44</div>
          <div :style="{ borderColor: imgWidth == 32 ? '#79a6ff' : '' }" class="item-32 fl ml10" @click="imgWidth = 32">32</div>
        </div>
      </div>
      <div class="mt10 clearfix">
        <div class="text-title"> 可选字段： </div>
        <div class="mt10" style="margin-left: 20px">
          <a-checkbox-group v-model="selItem" @change="selCheckbox($event, 'field')">
            <div class="group-item" v-for="item of userSelFieldList">
              <a-checkbox :value="item.code">{{ item.name }}</a-checkbox>
            </div>
          </a-checkbox-group>
        </div>
      </div>
      <div class="mt10 clearfix">
        <div class="text-title"> 产品属性： </div>
        <div class="mt10" style="margin-left: 20px">
          <a-checkbox-group v-model="selItem" @change="selCheckbox($event, 'property')">
            <div class="group-item" v-for="item of propertyList">
              <a-checkbox :value="item.code">{{ item.name }}</a-checkbox>
            </div>
          </a-checkbox-group>
        </div>
      </div>
      <div class="left-btn-footer">
        <a-button class="gray-outline">取消打印</a-button>
        <a-button type="primary" style="margin-left: 50px">确认打印</a-button>
      </div>
    </div>
    <div class="right fl">
      <a-scrollbar style="height: calc(100vh - @menuHeight); overflow: auto">
        <div class="item-con">
          <div class="top"> 共计：34单，SKU23种24件，包装2种24件 </div>
          <div class="table-title clearfix">
            <div class="fl" :style="{ width: imgWidth + 10 + 'px' }">图片</div>
            <div class="fl" style="width: 100px">MSKU/SKU</div>
            <div class="fl" style="width: 40px">数量</div>
            <div class="fl" :style="{ width: item.width + 'px' }" v-for="(item, index) in titleList">
              <span>{{ item.name }}</span>
              <span style="margin-left: 5px">
                <icon-close class="icon-close" @click="delTitleItem(index, item)" />
              </span>
            </div>
          </div>
          <div class="table-item">
            <div>
              <div class="package-info clearfix">
                <div class="fl shape-code">
                  <div><img src="http://www.t-x-m.com/barcode.asp?bc1=123456789012&bc2=10&bc3=3.5&bc4=1.2&bc5=0&bc6=1&bc7=Arial&bc8=15&bc9=1" alt="" /></div>
                  <div style="font-size: 10px; margin-top: -5px">CK2306061</div>
                </div>
                <div class="fl other-info ml10 clearfix">
                  <div style="width: 240px" class="fl">
                    <div class="clearfix">
                      <div class="fl text">店铺：</div>
                      <div class="fl value text-limit">测试店铺</div>
                    </div>
                    <div class="clearfix mt10">
                      <div class="fl text">平台单号：</div>
                      <div class="fl value text-limit">256420153227852</div>
                    </div>
                  </div>
                  <div style="width: 240px" class="fl">
                    <div class="clearfix">
                      <div class="fl text">收货国家：</div>
                      <div class="fl value text-limit">测试店铺</div>
                    </div>
                    <div class="clearfix mt10">
                      <div class="fl text">发货仓：</div>
                      <div class="fl value text-limit">256420153227852</div>
                    </div>
                  </div>
                  <div style="width: 240px" class="fl">
                    <div class="clearfix">
                      <div class="fl text">承诺发货时间：</div>
                      <div class="fl value text-limit">2023-12-12 00:00:00</div>
                    </div>
                    <div class="clearfix mt10">
                      <div class="fl text">提交仓库时间：</div>
                      <div class="fl value text-limit">2023-12-12 00:00:00</div>
                    </div>
                  </div>
                  <div style="width: 240px" class="fl">
                    <div class="clearfix">
                      <div class="fl value text-limit" style="color: red">剩余 2天12小时12分</div>
                    </div>
                    <div class="clearfix mt10">
                      <div class="fl text">拣货员：</div>
                      <div class="fl value text-limit">李四</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="product-list">
                <div class="list-item clearfix" :style="{ height: imgWidth + 20 + 'px' }">
                  <div class="img fl parent" style="padding: 0 5px">
                    <img class="children" :width="imgWidth" :height="imgWidth" src="https://cdn2.selleroa.com/saas/product/81378616096930817.jpg" alt="" />
                  </div>
                  <div class="msku fl parent" style="width: 100px">
                    <div class="children">
                      <div style="width: 95%" class="text-limit"> SISGEM-DCE54044</div>
                      <div style="width: 95%" class="text-limit">DCE54044</div>
                    </div>
                  </div>
                  <div class="num fl parent" :style="{ width: '40px' }">
                    <div class="children">2</div>
                  </div>
                  <div class="item-auto parent fl" v-for="item of titleList" :style="{ width: item.width + 'px' }">
                    <div class="children">123</div>
                  </div>
                </div>
                <div class="list-item clearfix" :style="{ height: imgWidth + 20 + 'px' }">
                  <div class="img fl parent" style="padding: 0 5px">
                    <img class="children" :width="imgWidth" :height="imgWidth" src="https://cdn2.selleroa.com/saas/product/81378616096930817.jpg" alt="" />
                  </div>
                  <div class="msku fl parent" style="width: 100px">
                    <div class="children">
                      <div style="width: 95%" class="text-limit"> SISGEM-DCE54044</div>
                      <div style="width: 95%" class="text-limit">DCE54044</div>
                    </div>
                  </div>
                  <div class="num fl parent" :style="{ width: '40px' }">
                    <div class="children">2</div>
                  </div>
                  <div class="item-auto parent fl" v-for="item of titleList" :style="{ width: item.width + 'px' }">
                    <div class="children">123</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </a-scrollbar>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs } from 'vue'
  import { printOutboundbill } from '@/api/order'
  import { useRoute } from 'vue-router'
  export default defineComponent({
    setup(props: any, { emit }) {
      const route: any = useRoute()
      const data: any = reactive({
        printList: [],
        userSelFieldList: [
          { name: '货位', code: '货位', width: '100' },
          { name: '包装名称', code: '包装名称', width: '100' },
          { name: '包装SKU', code: '包装SKU', width: '100' },
          { name: '包装出货仓', code: '包装出货仓', width: '100' },
          { name: '销售员', code: '销售员', width: '100' },
          { name: '定制单号', code: '定制单号', width: '100' },
          { name: '备注', code: '备注', width: '100' },
        ],
        propertyList: [
          { name: '货位', code: '货位1', width: '100' },
          { name: '包装名称', code: '包装名称1', width: '100' },
          { name: '包装SKU', code: '包装SKU1', width: '100' },
          { name: '包装出货仓', code: '包装出货仓1', width: '100' },
          { name: '销售员', code: '销售员1', width: '100' },
          { name: '定制单号', code: '定制单号1', width: '100' },
          { name: '备注', code: '备注1', width: '100' },
        ],
        imgWidth: 44,
        selItem: [],
        titleList: [],
      })
      const getOrderList = async () => {
        let ids: any = route.query.ids.split(',') || []
        const res: any = await printOutboundbill(ids)
        data.printList = res?.data || []
      }

      const delTitleItem = (index: string, obj: any) => {
        data.titleList.splice(index, 1)
        let i = data.selItem.findIndex((e: any) => e == obj.code)
        if (i != -1) data.selItem.splice(i, 1)
      }

      const selCheckbox = (info: any, type: string) => {
        let itemArr = [...data.userSelFieldList, ...data.propertyList]
        data.titleList = []
        data.selItem.forEach((e: string) => {
          let obj = itemArr.find((el: any) => e == el.code)
          if (obj) data.titleList.push(obj)
        })
      }

      getOrderList()
      return {
        ...(toRefs(data) as any),
        delTitleItem,
        selCheckbox,
      }
    },
  })
</script>

<style lang="less" scoped>
  .icon-close {
    cursor: pointer;
  }

  .parent {
    display: flex;
    height: 100%;

    border-right: 1px solid #d7d7d7;
    &:last-child {
      border-right: none;
    }
  }

  .children {
    margin: auto;
  }

  .lh40 {
    height: 40px;
    line-height: 40px;
  }

  .left-btn-footer {
    width: 100%;
    margin-top: 30px;
    text-align: center;
  }

  .group-item {
    width: 120px;
    float: left;
  }

  .item-80 {
    width: 80px;
    height: 80px;
    border: 1px solid #d7d7d7;
    text-align: center;
    line-height: 80px;
    background-color: #f2f2f2;
    cursor: pointer;
    user-select: none;
  }
  .item-60 {
    width: 60px;
    height: 60px;
    border: 1px solid #d7d7d7;
    margin-top: 20px;
    text-align: center;
    line-height: 60px;
    background-color: #f2f2f2;
    cursor: pointer;
    user-select: none;
  }
  .item-44 {
    width: 44px;
    height: 44px;
    border: 1px solid #d7d7d7;
    margin-top: 36px;
    text-align: center;
    line-height: 44px;
    background-color: #f2f2f2;
    cursor: pointer;
    user-select: none;
  }
  .item-32 {
    width: 32px;
    height: 32px;
    border: 1px solid #d7d7d7;
    margin-top: 48px;
    text-align: center;
    line-height: 32px;
    background-color: #f2f2f2;
    cursor: pointer;
    user-select: none;
  }

  .print-pdf-con {
    width: 100%;
    height: calc(100vh - @menuHeight);
    overflow: hidden;
    .left {
      width: 400px;
      height: 100%;
      background-color: white;
      // height: 200px;
      // border: 1px solid red;
      padding: 20px 10px;
      box-sizing: border-box;
      .title {
        font-size: 20px;
      }

      .text-title {
        width: 100px;
        text-align: right;
        font-size: 14px;
        font-weight: 700;
      }
    }
    .right {
      height: calc(100vh - @menuHeight);
      overflow: auto;
      margin-left: 10px;
      .item-con {
        width: 1103px;
        height: 774px;
        margin-bottom: 10px;
        background-color: white;
        .table-title {
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 12px;
          width: 100%;
          background-color: #d7d7d7;
          div {
            text-align: center;
          }
        }
        .table-item {
          .package-info {
            height: 60px;
            padding: 5px 10px;
            box-sizing: border-box;
            background-color: #f2f2f2;

            .shape-code {
              width: 100px;
              text-align: center;
              // height: 40px;
            }
            .other-info {
              font-size: 10px;
              .text {
                width: 85px;
                text-align: right;
              }
              .value {
                width: 155px;
              }
            }
          }
          .product-list {
            width: 100%;
            font-size: 10px;

            .list-item {
              border-bottom: 1px solid #d7d7d7;
            }
          }
        }
      }
    }
  }
</style>
